<template>
  <div>
    <select v-model="selectedFontSize" @change="changeFontSize">
      <option v-for="fontSize in fontSizes" :key="fontSize" :value="fontSize">
        {{ fontSize }}
      </option>
    </select>
    <div class="fullscreen-content">
      <!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. -->
    </div>
  </div>
</template>
<script>
// import index from '@/pages/gateway/index.vue'
export default {
  name: 'TransitIndex',
  components: {
    // index
  },
  data() {
    return {
      selectedFontSize: '', // 当前选中的字体大小
      fontSizes: ['默认', '中', '大'] // 字体大小选项
    }
  },

  mounted() {},

  methods: {
    // 实现字体大小切换
    changeFontSize() {
      const content = document.querySelector('.fullscreen-content')
      switch (this.selectedFontSize) {
        case '默认':
          content.style.fontSize = '14px'
          break
        case '中':
          content.style.fontSize = '18px'
          break
        case '大':
          content.style.fontSize = '24px'
          break
        default:
          content.style.fontSize = '' // 恢复默认字体大小
          break
      }
    }
  }
}
</script>
  
  <style lang="less" scoped>
</style>